import React from 'react';
import {  Button } from 'antd';
import classnames from 'classnames';
import ReplyStore from '../../stores/reply';
import { observer } from 'mobx-react';
import PopoverSearchPanel from './popover-search-panel';
import SearchPanel from './search-panel';
import {WeaInput} from 'ecCom';

export interface SearchInputProps {
    reply: ReplyStore;
}
@observer
export default class SearchInput extends React.Component<SearchInputProps, any> {
    render() {
        const { reply } = this.props;
        const ClassNames = classnames("cube-search-input-btn", { [`cube-search-input-active`]: reply.showSearchDrop })
        return (
            <div className="cube-search-input-wrap" style={{ width: 200 }} ref="_container">
                <WeaInput value={reply.searchContent} onChange={(v)=>reply.searchContent  = v} {...{onKeyPress:reply.quickSearch}}/>
                <Button className={ClassNames} onClick={this.toggleSerach} type="ghost" shape="circle-outline" >
                    <PopoverSearchPanel visible={reply.showSearchDrop} content={<SearchPanel reply={reply} />}>
                        <i className={`${reply.showSearchDrop ? 'icon-coms-up' : 'icon-coms-down'} cube-search-toggle`} style={{ color: '#b2b2b2' }} />
                    </PopoverSearchPanel>
                </Button>
            </div>
        )
    }
    toggleSerach = () => {
        const { reply } = this.props;
        if (reply.showSearchDrop) {
            reply.hideSearch();
        } else {
            reply.showSearch();
        }
    }
}